<mat-card class="card-demo">
  <mat-card-title><a href="http://jsfiddle.net/tndgvkfq/" target="_blank">JsFiddle</a>
  </mat-card-title>
  <mat-card-subtitle>
    Grid with column spans calculated using
    '<span style="color: #333333">flex: &lt;grow&gt; &lt;shrink&gt; calc(&lt;...&gt;);</span>'
    expressions.
  </mat-card-subtitle>
  <mat-card-content>
    <div class="containerX">
      <div class="container">
        <div>flex: 1 1 5em;</div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="container">
        <div></div>
        <div [fxFlex]="calc2Cols"> flex: 2 2 calc(10em + 10px);</div>
        <div></div>
      </div>
      <div class="container">
        <div [fxFlex]="calc2Cols"> flex: 2 2 calc(10em + 10px);</div>
        <div></div>
        <div></div>
      </div>
      <div class="container">
        <div></div>
        <div></div>
        <div [fxFlex]="calc2Cols"> flex: 2 2 calc(10em + 10px);</div>
      </div>
      <div class="container">
        <div [fxFlex]="calc3Cols" class="col3"> flex: 3 3 calc(15em + 20px);</div>
        <div></div>
      </div>
      <div class="container">
        <div></div>
        <div [fxFlex]="calc3Cols" class="col3"> flex: 3 3 calc(15em + 20px);</div>
      </div>
    </div>
  </mat-card-content>
  <mat-card-footer class="bottomPad">
    <div class="hint">Note: each cell has 'margin-left:10px' so the 'calc( )' expressions must
      account for those.
    </div>
  </mat-card-footer>
</mat-card>
